<template>
  <p>{{ obj.a.b.c.d }}</p>
  <button @click="handleClick">修改age</button>
</template>

<script>
import { ref, shallowRef, triggerRef } from 'vue'
export default {
  setup() {
    const obj = shallowRef({
      age: 18,
      a: {
        b: {
          c: {
            d: 'Hello World',
          },
        },
      },
    })
    const handleClick = () => {
      // obj.value.a.b.c.d = 'Hello 2022'
      // 解决方法 1
      // obj.value = { a: { b: { c: { d: 'Hello 2022' } } } }

      obj.value.a.b.c.d = 'Hello 2022'
      // 解决方法 2
      // 当 obj 变化的时候主动触发视图更新
      triggerRef(obj)
    }
    return {
      obj,
      handleClick,
    }
  },
}
</script>
